<template>
  <div class="login">
    <div class="title">用户注册</div>
    <div class="block">
        <input type="text" v-model="phone" placeholder="输入账号">
    </div>
    <div class="block">
        <input type="text" v-model="pass" placeholder="输入密码">
    </div>
    <div class="block">
        <input type="button" @click="register" value="立即注册">
    </div>
  </div>
</template>

<script>
import { user_register } from '../utils/api'

export default {
    data(){
        return {
            phone:'',
            pass:''
        }
    },
    methods:{
        register(){
            console.log(this.phone,this.pass);
            //发请求
            user_register( {phone:this.phone,pass:this.pass} ).then((res)=>{
                console.log(res.data);
                //跳转到 登录页
                this.$router.push('/login');
            })

        }
    }
}
</script>

<style lang="scss">
.login{
    .title{
        padding: 60px 0;
        text-align: center;
    }
    .block{
        margin: 0 20px;
        margin-bottom: 20px;
        input{
            width: 100%;
            height: 40px;
            padding-left: 20px;
            box-sizing: border-box;
            border: 1px solid #ccc;
            border-radius: 20px;
        }
    }
}
</style>